{include file="public/layout" /}

<body class="bodystyle" style="overflow-x: hidden;padding: 0;min-width: 674px;background: #fff;">
<style type="text/css">
    .ncap-form-default dd.opt {width: 79%;}
    .select-express {border: 1px solid red !important; color: red !important;}
    .expressHtml {width: auto !important; height: auto !important; border: 1px solid red !important;}
</style>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page" style="width: 810px;margin: 0 auto;">
    <div class="flexigrid">
        <form class="form-horizontal" id="postForm">
            <input type="hidden" name="status" value="6">
            <input type="hidden" name="users_id" value="{$service.users_id}">
            <input type="hidden" name="order_id" value="{$service.order_id}">
            <input type="hidden" name="order_code" value="{$order.order_code}">
            <input type="hidden" name="details_id" value="{$service.details_id}">
            <input type="hidden" name="service_id" value="{$service.service_id}">
            <input type="hidden" name="product_id" value="{$service.product_id}">
            <input type="hidden" name="service_type" value="{$service.service_type}">

            <div class="ncap-form-default">
                <dl class="row">
                    <dt class="tit"> <label>收货人</label> </dt>
                    <dd class="opt"> {$order.consignee} </dd>
                </dl>
                <dl class="row">
                    <dt class="tit"> <label>联系方式</label> </dt>
                    <dd class="opt"> {$order.mobile} </dd>
                </dl>
                <dl class="row">
                    <dt class="tit"> <label>收货地址</label> </dt>
                    <dd class="opt"> {$order.address} </dd>
                </dl>
                <dl class="row">
                    <dt class="tit"> <label><em>*</em>快递公司</label> </dt>
                    <dd class="opt" id="expressHtml">
                        <input type="hidden" name="delivery[express_id]" id="express_id">
                        <input type="hidden" name="delivery[express_code]" id="express_code">
                        <input type="hidden" name="delivery[name]" id="express_name">
                        <select id="select_express" style="width: 300px;" onchange="selectExpress(this);">
                            <option value="0">请选择</option>
                            {volist name="$express" id="vo"}
                            <option value="{$vo.express_id}" code="{$vo.express_code}" name="{$vo.express_name}">{$vo.express_name}</option>
                            {/volist}
                        </select>
                        <div class="express-tag">
                            {volist name="$express" id="vo"}
                            {if condition='$i <= 4'}
                            <span class="span_all span_{$vo.express_id}" data-id="{$vo.express_id}" data-code="{$vo.express_code}" data-name="{$vo.express_name}" data-i="{$i}" onclick="spanSelectExpress(this);">{$vo.express_name}</span>
                            {/if}
                            {/volist}
                        </div>
                    </dd>
                </dl>
                <dl class="row">
                    <dt class="tit"> <label for="deliveryCode"><em>*</em>快递单号</label> </dt>
                    <dd class="opt">
                        <input type="text" name="delivery[code]" id="deliveryCode" class="input-txt">
                    </dd>
                </dl>
            </div>

            <div class="ncap-form-default">
                <div class="bot" style="padding-bottom: 0px;">
                    <a href="JavaScript:void(0);" onclick="checkForm();" class="ncap-btn-big ncap-btn-green">确认发货</a>
                    <a href="JavaScript:void(0);" onclick="closeIframes();" style="height: 20px; padding: 7px 19px;">取消</a>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    // 关闭自身弹窗
    function closeIframes(isAjax) {
        var parentObj = parent.layer.getFrameIndex(window.name);
        if (parentObj) {
            if (isAjax) {
                parent.window.location.reload();
            } else {
                parent.layer.close(parentObj);
            }
        }
    }

    // 下拉框选择
    function selectExpress(obj) {
        var selectObj = $(obj).find("option:selected");
        $('#express_id').val($(selectObj).attr('value'));
        $('#express_code').val($(selectObj).attr('code'));
        $('#express_name').val($(selectObj).attr('name'));
        // span选中效果
        $('.span_all').removeClass('select-express');
        $('.span_' + $(selectObj).attr('value')).addClass('select-express');
    }

    // span选择
    function spanSelectExpress(obj) {
        $('#express_id').val($(obj).data('id'));
        $('#express_code').val($(obj).data('code'));
        $('#express_name').val($(obj).data('name'));
        // 下拉框选中效果
        var obj_i = $(obj).data('i');
        obj_i++;
        $("#select_express option:nth-child("+obj_i+")").prop("selected", 'selected');
        // span选中效果
        $('.span_all').removeClass('select-express');
        $('.span_' + $(obj).data('id')).addClass('select-express');
    }

    // 表单提交
    function checkForm() {
        var expressName = $('#express_name').val();
        if (!expressName) {
            showErrorMsg('请选择快递公司');
            $('#expressHtml').addClass('expressHtml');
            setTimeout(function() {
                $('#expressHtml').removeClass('expressHtml');
            }, 1000);
            return false;
        }
        var deliveryCode = $('#deliveryCode').val();
        if (!deliveryCode) {
            showErrorMsg('请填写快递单号');
            $('#deliveryCode').focus();
            return false;
        }
        layer_loading('正在处理');
        $.ajax({
            type: "post",
            url : "{:url('ShopService/after_service_handle', ['_ajax'=>1])}",
            data: $('#postForm').serialize(),
            dataType: 'json',
            success: function (res) {
                layer.closeAll();
                if (res.code == 1) {
                    layer.msg(res.msg, {time: 1000}, function() {
                        closeIframes(true);
                    });
                } else {
                    layer.alert(res.msg, {icon: 2, title: false, closeBtn: 0});
                }
            },
            error:function(e){
                layer.closeAll();
                layer.alert(e.responseText, {icon: 2, title: false, closeBtn: 0});
            }
        });
    }
</script> 
